<template>
    <div class="bck">
        <!-- 搜索 -->
        <!-- 展开后 -->
        <div class="search">
            <el-form :model="form" label-width="auto">
                <!-- 第一行 -->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="单据编号">
                            <el-input v-model="form.name" size="default" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="单据日期" size="default">
                            <el-col :span="11">
                                <el-date-picker v-model="form.date1" type="date" placeholder="请选择开始日期"
                                    style="width: 100%" />
                            </el-col>
                            <span class="text-gray-500">~</span>
                            <el-col :span="11">
                                <el-date-picker v-model="form.date1" type="date" placeholder="请选择结束日期"
                                    style="width: 100%" />
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单据编号">
                            <el-input v-model="form.name" size="default" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="客户">
                            <el-input v-model="form.region" style="width: 240px" placeholder="Please input" clearable
                                size="default" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" style="display: flex;">
                        <el-col :span="9">
                            <el-form-item label="单据阶段" size="default">
                                <el-select v-model="form.region">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="已失效" size="default">
                                <el-select v-model="form.region">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="已关闭" size="default">
                                <el-select v-model="form.region">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="已作废" size="default">
                                <el-select v-model="form.region">
                                    <el-option label="Zone one" value="shanghai" />
                                    <el-option label="Zone two" value="beijing" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
                <!-- 第三行按钮 -->
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item>
                            <el-button type="primary" size="default" :icon="Search">
                                查询
                            </el-button>
                            <el-button size="default" :icon="RefreshRight">
                                重置
                            </el-button>
                            <!-- 展开收起 -->
                            <div style="color: #409EFF;">
                                <span style="margin: 0 5px 0 10px;">收起</span><el-icon>
                                    <ArrowUp />
                                </el-icon>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 展开前 -->
        <div class="search">
            <el-form :model="form" label-width="auto">
                <!-- 第一行 -->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="单据编号">
                            <el-input v-model="form.name" size="default" placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="单据日期" size="default">
                            <el-col :span="11">
                                <el-date-picker v-model="form.date1" type="date" placeholder="请选择开始日期"
                                    style="width: 100%" />
                            </el-col>
                            <span class="text-gray-500">~</span>
                            <el-col :span="11">
                                <el-date-picker v-model="form.date1" type="date" placeholder="请选择结束日期"
                                    style="width: 100%" />
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!-- 第三行按钮 -->
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item>
                                    <el-button type="primary" size="default" :icon="Search">
                                        查询
                                    </el-button>
                                    <el-button size="default" :icon="RefreshRight">
                                        重置
                                    </el-button>
                                    <!-- 展开收起 -->
                                    <div style="color: #409EFF;">
                                        <span style="margin: 0 5px 0 10px;">展开</span><el-icon>
                                            <ArrowDown />
                                        </el-icon>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 导出与自定义列 -->
        <div style="display: flex; justify-content: space-between; margin: 20px 0;">
            <div style="color: #409EFF;">
                <span>
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span style="margin: 0 5px 0 10px;">新增</span>
                </span>
                <span style="margin-left: 30px;">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span style="margin: 0 5px 0 10px;">导出</span>
                </span>
                <span style="margin-left: 30px;">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span style="margin: 0 5px 0 10px;">导入</span>
                </span>
                <span style="margin-left: 30px; color: #444444;">orderedQty</span>
                <span style="color: #444444;">已选择<span style="color: #409EFF;">1</span>项</span>
                <span style="margin-left: 20px;">清空</span>
            </div>
            <div style="color: #409EFF;">
                <el-icon>
                    <Setting />
                </el-icon>
                <span style="margin: 0 5px 0 10px;">自定义列</span>
            </div>
        </div>
        <!-- 表格 -->
        <div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="selection" :selectable="selectable" width="55" fixed="left"/>
                <el-table-column prop="date" label="Date" sortable width="180" fixed="left"/>
                <el-table-column prop="name" label="Name" sortable width="180" fixed="left"/>
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="name" label="Name" sortable width="180" />
                <el-table-column prop="address" label="use" sortable width="180" :formatter="formatter"/>
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default>
                        <el-button link type="primary" size="small">
                            编辑
                        </el-button>
                        <el-button link type="primary" size="small">更多</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ArrowDown, Search, RefreshRight, Setting, Download,ArrowUp } from '@element-plus/icons-vue'//图标
import type { TableColumnCtx } from 'element-plus'//表格
import {getReceivableList} from '../../api/receivable/receivable'

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
    region: '',
})

const onSubmit = () => {
    console.log('submit!')
}

// 表格
interface User {
    date: string
    name: string
    address: string
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
    return row.address
}

const tableData: User[] = [
    {
        date: '2016-05-03',
        name: '3',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: '4',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: '5',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: '6',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
// 打印本地localStorage的数据
console.log(localStorage.getItem('token'));

// 渲染表格
// const getTable = async () => {
//         const res = await getReceivableList()
//         console.log(res)
// }
// getTable()
</script>

<style scoped>
.bck {
    width: 100%;
    height: 100%;
    margin-top: 5px;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
}
.el-table .el-table__cell {
  padding: 6px 0; /* 调整内边距，默认是 12px 0，减小后高度会降低 */
}

</style>